<template>
	<view class="container">
		<UniNavBar />
		<view class="box">
			<view class="register_txt tac">
				现手机号验证
			</view>
			<view class="desc tac">更换后账号数据将会转移至新账号</view>
			<u-form labelPosition="left" :model="ruleForm" :rules="rules" labelWidth="80" ref="uForm" class="uForm"
				:errorType="errorType" :labelStyle="labelStyle">
				<u-form-item label="" prop="account" borderBottom>

					<u-input v-model="ruleForm.phone" placeholder="请输入手机号码" border="none">
						<u-text text="+86" slot="prefix" margin="0 6rpx 0 0" type="tips"></u-text>
					</u-input>
				</u-form-item>
				<u-form-item label="" prop="password" borderBottom>
					<u-input v-model="ruleForm.code" type="password" placeholder="请输入验证码" border="none">
					</u-input>
					<!-- <text class="send" @click="sendCode()">立即发送</text> -->
					<view class="send" @click.stop="onGetCode">
						{{ countdown > 0 ? '再次发送('+countdown+')' : '立即发送' }}
					</view>
				</u-form-item>

				<view class="ubtn">
					<u-button type="primary" text="确定" @click="submit"></u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		sendCode,
		updatePhone
	} from "../../api/login.js";
	import st from "../../utlis/showtoast.js";
	import UniNavBar from "@/components/uniNavbar/index.vue"
	export default {
		name: 'changeBing', // 换绑手机号
		components: {
			UniNavBar
		},
		data() {
			return {
				checked: [false],
				ruleForm: {
					phone: '',
					code: '',
				},
				errorType: 'toast',
				labelStyle: {
					color: '#6750F8',
				},
				countdown: 0, //倒计时
				phonekey:'',
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						// {
						// 	// 自定义验证函数，见上说明
						// 	validator: (rule, value, callback) => {
						// 		// 上面有说，返回true表示校验通过，返回false表示不通过
						// 		return uni.$u.test.mobile(value);
						// 	},
						// 	message: '手机号码不正确',
						// 	// 触发器可以同时用blur和change
						// 	trigger: ['change', 'blur'],
						// }
					],
					code: {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		onLoad() {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			radioChange(e) {
				console.log(e);
			},

			async submit() {
				if (this.ruleForm.phone == "") {
					st.show("请输入手机号")
					return
				}
				if (this.ruleForm.code == "") {
					st.show("请输入验证码")
					return
				}
				let res = await updatePhone(this.ruleForm.phone, this.ruleForm.code, this.phonekey)
				if (res.code == 1) {
					st.success(res.msg)
					setTimeout(() => {
					  uni.navigateBack()
					}, 1500);
				}
				// this.$refs.uForm.validate().then(res => {
					
				// }).catch(errors => {
				// 	console.log(errors)
				// })
			},
			async onGetCode() {
				let res = await sendCode(this.ruleForm.phone)
				if (res.code == 1) {
					this.phonekey = res.data
					st.success(res.msg)
					this.startCountdown()
				}
			},
			startCountdown() {
				this.countdown = 60;
				const countdownInterval = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(countdownInterval);
					}
				}, 1000);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background: #fff;

		.box {
			padding: 100rpx 100rpx 0;

			.register_txt {
				font-size: 42rpx;
				color: $uni-text-color;
				font-weight: bold;
			}

			.desc {
				margin-top: 45rpx;
				font-size: 26rpx;
				color: $uni-text-color-grey;
				line-height: 36rpx;
			}

			.uForm {
				margin-top: 136rpx;

				.send {
					margin-left: 50rpx;
				}

				.ubtn {
					margin-top: 86rpx;

					/deep/ .u-button--primary {
						border-radius: 86rpx;
					}

				}
			}
		}
	}
</style>